<template>
	<view class="container">
		<view class="header">
			<view class="title">我的车辆</view>
			<view class="subtitle">管理您绑定的车辆</view>
		</view>
		
		<!-- 车辆列表 -->
		<view class="vehicle-list" v-if="vehicles.length > 0">
			<view class="vehicle-item" v-for="(vehicle, index) in vehicles" :key="vehicle.vehicle_id">
				<view class="vehicle-info">
					<view class="plate-number">{{ vehicle.plate_number }}</view>
					<view class="vehicle-details">
						<view class="detail-row">
							<text class="detail-label">类型：</text>
							<text class="detail-value">{{ vehicle.vehicle_type || '未知' }}</text>
						</view>
						<view class="detail-row" v-if="vehicle.brand">
							<text class="detail-label">品牌：</text>
							<text class="detail-value">{{ vehicle.brand }}</text>
						</view>
						<view class="detail-row" v-if="vehicle.model">
							<text class="detail-label">型号：</text>
							<text class="detail-value">{{ vehicle.model }}</text>
						</view>
						<view class="detail-row" v-if="vehicle.color">
							<text class="detail-label">颜色：</text>
							<text class="detail-value">{{ vehicle.color }}</text>
						</view>
					</view>
					<view class="vehicle-date">
						<text>注册日期：{{ vehicle.register_date }}</text>
					</view>
				</view>
				<view class="vehicle-actions">
					<button class="delete-btn" @click="confirmDelete(vehicle)">删除</button>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<image class="empty-icon" src="/static/icons/empty.png" mode="aspectFit"></image>
			<text class="empty-text">暂无绑定车辆</text>
			<text class="empty-desc">点击下方按钮添加车辆</text>
		</view>
		
		<!-- 底部操作 -->
		<view class="bottom-action">
			<button class="add-btn" @click="navigateToAdd">
				<text class="btn-icon">+</text>
				<text>添加车辆</text>
			</button>
		</view>
	</view>
</template>

<script>
	import { getVehicleList, deleteVehicle } from '@/api/vehicle.js'
	
	export default {
		data() {
			return {
				vehicles: [],
				isLoading: false
			}
		},
		onShow() {
			// 每次页面显示时获取最新数据
			this.fetchVehicles()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.fetchVehicles(() => {
				uni.stopPullDownRefresh()
			})
		},
		methods: {
			// 获取车辆列表
			fetchVehicles(callback) {
				// 检查登录状态
				const token = uni.getStorageSync('token')
				if (!token) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1500)
					return
				}
				
				this.isLoading = true
				
				// 调用API获取当前用户的车辆列表
				getVehicleList()
					.then(data => {
						this.vehicles = data.results || []
					})
					.catch(err => {
						console.error('获取车辆列表失败', err)
						uni.showToast({
							title: err.message || '获取车辆列表失败',
							icon: 'none'
						})
					})
					.finally(() => {
						this.isLoading = false
						if (callback) callback()
					})
			},
			
			// 确认删除
			confirmDelete(vehicle) {
				uni.showModal({
					title: '删除确认',
					content: `确定要删除车牌号为 ${vehicle.plate_number} 的车辆吗？`,
					confirmText: '删除',
					confirmColor: '#ff4d4f',
					success: (res) => {
						if (res.confirm) {
							this.deleteVehicle(vehicle.vehicle_id)
						}
					}
				})
			},
			
			// 删除车辆
			deleteVehicle(vehicleId) {
				uni.showLoading({
					title: '删除中...'
				})
				
				deleteVehicle(vehicleId)
					.then(() => {
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						})
						// 重新获取列表
						this.fetchVehicles()
					})
					.catch(err => {
						console.error('删除车辆失败', err)
						uni.showToast({
							title: err.message || '删除失败',
							icon: 'none'
						})
					})
					.finally(() => {
						uni.hideLoading()
					})
			},
			
			// 跳转到添加页面
			navigateToAdd() {
				uni.navigateTo({
					url: '/pages/parking/add'
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 30rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.header {
		margin-bottom: 30rpx;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.subtitle {
		font-size: 26rpx;
		color: #666;
	}
	
	.vehicle-list {
		margin-bottom: 100rpx;
	}
	
	.vehicle-item {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.vehicle-info {
		flex: 1;
		width: 100%;
	}
	
	.plate-number {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.vehicle-details {
		margin-bottom: 10rpx;
	}
	
	.detail-row {
		display: flex;
		align-items: center;
		margin-bottom: 6rpx;
	}
	
	.detail-label {
		font-size: 26rpx;
		color: #666;
		margin-right: 10rpx;
	}
	
	.detail-value {
		font-size: 26rpx;
		color: #333;
		font-weight: bold;
	}
	
	.vehicle-date {
		font-size: 24rpx;
		color: #999;
	}
	
	.vehicle-actions {
		margin-left: 20rpx;
	}
	
	.delete-btn {
		background-color: #f5f5f5;
		color: #ff4d4f;
		border: none;
		font-size: 26rpx;
		padding: 10rpx 20rpx;
		border-radius: 6rpx;
	}
	
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
	}
	
	.empty-icon {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}
	
	.empty-text {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	
	.empty-desc {
		font-size: 26rpx;
		color: #999;
	}
	
	.bottom-action {
		position: fixed;
		bottom: 50rpx;
		left: 30rpx;
		right: 30rpx;
	}
	
	.add-btn {
		width: 100%;
		height: 90rpx;
		background-color: #1890ff;
		color: white;
		border-radius: 45rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.btn-icon {
		margin-right: 10rpx;
		font-size: 40rpx;
		font-weight: bold;
	}
</style>